<template>
  <div>
    <div class="pic_box" :style="`height:${height}px;width:${width}px`">
      <img :src="`${pic}`" class="box_img" >
      <p class="word">{{word}}</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "XPicBox",
    props: {
      pic: {type: String, default: ''},
      word: {type: String, default: ''},
      height: {type: String, default: ''},
      width: {type: String, default: ''},

    }
  }
</script>

<style scoped lang="less">
  .pic_box {
    position: relative;
    /*margin: 10px;*/
    .word {
      padding: 10px 0;
      color: #000;
      font-size: 18px;
      font-family: 微软雅黑;
      background-color: rgba(198, 198, 198, 0.5);
      position: absolute;
      bottom: 0;
      width: 100%;
      text-align: center;
    }
  }
</style>
